<!DOCTYPE html>
<html>
<head>
    <title>Menu Develop</title>
    <link rel="stylesheet" type="text/css" href="css/MenuDevelop.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>
        $(document).ready(function($) {
            $('.menu-inner').hover(function(){
                $('.menu-close').animate({
                    "margin-right" : "-100px"
                },200);
            }, function(){
                $('.menu-close').animate({
                    "margin-right" : "0px"
                },200);
            });
        })
    </script>
</head>
<body>
<a class="menu-close" onClick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>
<div class="menu-outer">
    <div class="menu-inner">
        <div class="menu-icon">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
        <nav>
            <ul>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    </div>
</div>
</body>
</html>